<template>
  <div>
    <div class="herdertop">
      <img src="../../assets/top.png" alt="" class="topImg" />
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>到家首页配置</el-breadcrumb-item>
        <el-breadcrumb-item>轮播图配置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="center" style="padding-top: 0px;">
      <div class="hander">轮播图配置</div>
      <div class="entirety">
        <div class="search" style="flex-direction: column;">
          <!--  账号状态搜索信息 -->
          <div style="display:flex;">
            <div class="demo-input-suffix">
              城市
              <el-select
                clearable
                v-model="refCode"
                placeholder="请选择"
                @change="changeRefCode"
              >
                <el-option
                  v-for="item in cityList"
                  :key="item.cityCode"
                  :label="item.cityName"
                  :value="item.cityCode"
                >
                </el-option>
              </el-select>
            </div>
            <div class="demo-input-suffix">
              商圈
              <el-select
                clearable
                v-model="businessCode"
                placeholder="请选择"
                :disabled="businessList.length <= 1"
              >
                <el-option
                  v-for="item in businessList"
                  :key="item.areaCode"
                  :label="item.areaName"
                  :value="item.areaCode"
                >
                </el-option>
              </el-select>
            </div>
            <div class="demo-input-suffix">
              状态
              <el-select
                clearable
                v-model="bannerStatusCode"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in business"
                  :key="item.statusCode"
                  :label="item.statusName"
                  :value="item.statusCode"
                >
                </el-option>
              </el-select>
            </div>
            <div class="demo-input-suffix">
              适用端
              <el-select clearable v-model="platformType" placeholder="请选择">
                <el-option
                  v-for="item in PltfmTypeData"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div style="margin-top:8px;margin-left:5px">
            <el-button
              style="background-color:#fd804c;color: #fff;"
              size="medium"
              @click="demand"
              >查询</el-button
            >
            <el-button
              style="background-color:#fd804c;color: #fff;"
              size="medium"
              @click="isDialog('新增')"
              >新增</el-button
            >
            <el-button type="warning" size="medium" @click="empty"
              >清空</el-button
            >
          </div>
          <div class="news">
            <div>
              <el-dialog :title="msg" :visible.sync="dialogFormVisible">
                <el-form
                  ref="form"
                  :model="form"
                  status-icon
                  :rules="rules"
                  label-width="110px"
                  label-position
                  class="demo-ruleForm"
                >
                  <el-form-item
                    label="配置图片:"
                    prop="imgUrl"
                    v-if="msg == '编辑'"
                  >
                    <div>
                      <div style=" float: left;">
                        <img
                          :src="form.materialContent"
                          class="avatar"
                          v-if="form.materialContent"
                        />
                      </div>
                      <div
                        style="float: left;margin-top:33px; padding-left:15px;"
                      >
                        <el-upload
                          class="avatar-uploader"
                          action="https://api.xstarlife.com/systemapp/upload/singleFileUpload"
                          :headers="{ uploadScene: 'avatar' }"
                          :on-success="handleAvatarSuccess"
                          :show-file-list="false"
                          :before-upload="beforeAvatarUpload"
                        >
                          <div class="change">更换头像</div>
                        </el-upload>
                      </div>
                    </div>
                  </el-form-item>
                  <el-form-item
                    label="配置图片:"
                    prop="imgUrl"
                    v-if="msg == '新增'"
                  >
                    <el-upload
                      class="avatar-uploader"
                      action="https://api.xstarlife.com/systemapp/upload/singleFileUpload"
                      :headers="{ uploadScene: 'avatar' }"
                      :on-success="handleAvatarSuccess"
                      :show-file-list="false"
                      :before-upload="beforeAvatarUpload"
                    >
                      <img
                        v-if="materialContent"
                        :src="materialContent"
                        class="avatar"
                      />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </el-form-item>
                  <el-form-item label="轮播图名称:" prop="materialName">
                    <el-input
                      style="width: 50%; margin-bottom: 10px; margin-left: 10px"
                      v-model="form.materialName"
                      maxlength="10"
                      show-word-limit
                      placeholder="输入Banner名称"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="跳转页面:">
                    <el-input
                      v-model="form.targetUrl"
                      style="width: 70%; margin-bottom: 10px; margin-left: 10px"
                      placeholder="输入需要跳转H5页面链接"
                    ></el-input>
                    <el-button
                      style="color: #fc9e76;"
                      type="text"
                      @click="urlback"
                      >url配置规则说明</el-button
                    >
                  </el-form-item>
                  <el-form-item label="生效时间" required>
                    <el-col :span="11">
                      <el-form-item prop="startTime">
                        <el-date-picker
                          type="date"
                          placeholder="选择生效时间"
                          v-model="form.startTime"
                          style="
                            width: 80%;
                            margin-bottom: 10px;
                            margin-left: 10px;
                          "
                        ></el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col class="line" :span="2"></el-col>
                    <el-col :span="11">
                      <el-form-item
                        prop="endTime"
                        label="过期时间"
                        style="margin-left: -10px"
                      >
                        <el-date-picker
                          type="date"
                          placeholder="选择过期时间"
                          style="width: 150px"
                          v-model="form.endTime"
                        ></el-date-picker>
                      </el-form-item>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="适用端:" prop="platformType">
                    <el-select
                      clearable
                      v-model="form.platformType"
                      placeholder="请选择"
                      style="margin: 10px"
                    >
                      <el-option
                        v-for="item in PltfmTypeData"
                        :key="item.dictCode"
                        :label="item.dictName"
                        :value="item.dictCode"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="适用城市/商圈:" class="cityAndBusiness">
                    <el-checkbox
                      v-model="checkAll"
                      @change="handleCheckAllChange"
                      >全选</el-checkbox
                    >
                    <el-tree
                      :data="treeData"
                      ref="treeData"
                      show-checkbox
                      default-expand-all
                      @check="checkClick"
                      node-key="id"
                      :props="defaultProps"
                      :default-checked-keys="defaultCheckedKeys"
                      v-if="dialogFormVisible"
                    >
                    </el-tree>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false"
                    >取 消</el-button
                  >
                  <el-button
                    style="background-color:#fd804c;color: #fff;"
                    @click="isSubmit"
                    >确 定</el-button
                  >
                </div>
              </el-dialog>
            </div>
          </div>
        </div>
      </div>
      <!--  员工列表栏位-->
      <div class="entirety">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="sortId" label="序号">
            <template slot-scope="scope">
              <div>
                {{ scope.row.sortId }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="nickname" label="图片">
            <template slot-scope="scope">
              <el-image
                style="width: 70px; height: 30px"
                :src="scope.row.materialContent"
                :preview-src-list="[scope.row.materialContent]"
                :fit="'contain'"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="materialName" label="名称">
            <template slot-scope="scope">
              <div>
                {{ scope.row.materialName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="cityName" label="城市">
            <template slot-scope="scope">
              <div>
                {{ scope.row.cityName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="businessAreaName" label="商圈">
            <template slot-scope="scope">
              <div>
                {{ scope.row.businessAreaName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="platformType" label="适用端">
            <template slot-scope="scope">
              <div>
                {{ scope.row.platformType == 0 ? "App" : "小程序" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="bannerStatus" label="是否生效">
            <template slot-scope="scope">
              <div>
                {{ scope.row.bannerStatus }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="tempSwitch" label="状态">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.tempSwitch"
                :active-value="1"
                :inactive-value="0"
                @change="switchChange($event, scope.row)"
                active-color="#fb8053"
                inactive-color=""
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button
                @click="isDialog('编辑', scope.row)"
                style="color: #fc9e76;"
                type="text"
                size="small"
              >
                编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <div class="left"></div>
          <div class="right">
            <el-pagination
              layout="total, sizes, prev, pager, next, jumper"
              class="page"
              @size-change="sizeChangeHandle"
              @current-change="currentChangeHandle"
              :current-page="pageIndex"
              :page-size="pageSize"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment, { updateLocale } from "moment";
export default {
  inject: ["reload"],
  data() {
    return {
      materialContent: "",
      pageIndex: 1,
      pageSize: 20,
      msg: "",
      total: 0,
      dialogFormVisible: false,
      tableData: [],
      checkAll: false,
      // 可以根据接口返回数据展示
      isNum: "",
      treeData: [],
      // children和label 与接口字段保持一致
      defaultProps: {
        children: "areas",
        label: "label"
      },
      form: {
        cmsMaterialBannerList: [
          {
            businessCodes: "",
            refCode: ""
          }
        ],
        endTime: "",
        materialContent: "",
        materialId: 0,
        materialName: "",
        platformType: "",
        positionId: 0,
        startTime: "",
        targetUrl: ""
      },
      rules: {
        materialName: [{ max: 10, message: "长度10个字符", trigger: "blur" }],

        startTime: [
          {
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ],
        endTime: [
          {
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ],
        platformType: [
          { required: true, message: "请选择适用端:", trigger: "change" }
        ]
      },
      idData: "",
      userSearch: 0,
      refCode: "",
      bagcode: "",
      bannerStatusCode: "",
      platformType: "",
      businessCode: "",
      refCodeAndBusinessCode: [],
      AllData: [],
      fileList: [],
      cid: "",
      id: "",
      lister: [],
      business: [
        {
          statusCode: 1,
          statusName: "生效中"
        },
        {
          statusCode: 2,
          statusName: "已失效"
        },
        {
          statusCode: 3,
          statusName: "未生效"
        }
      ],
      businessList: [],
      PltfmTypeData: [
        {
          dictCode: "0",
          dictName: "APP"
        },
        {
          dictCode: "1",
          dictName: "小程序"
        }
      ],
      cityList: [],
      // 树形图默认选中的数据
      defaultCheckedKeys: [],
      originTreeData: []
    };
  },
  activated() {
    this.DetailByPage();
    this.getCityAreaTreeList();
    this.getBusinessNameCode();
  },
  methods: {
    handleAvatarSuccess(res) {
      if (this.msg == "编辑") {
        this.form.materialContent = res.data;
      } else {
        this.materialContent = res.data;
      }
    },
    checkClick() {
      const b = [].concat(
        this.$refs.treeData.getHalfCheckedKeys(),
        this.$refs.treeData.getCheckedKeys()
      );
      const refCodeAndBusinessCode = [];
      this.treeData.forEach(item => {
        const { id, areas = [] } = item;
        areas.forEach(itm => {
          const fig = b.includes(itm.id);
          if (fig) {
            refCodeAndBusinessCode.push({
              businessCode: itm.id,
              refCode: id
            });
          }
        });
      });
      this.refCodeAndBusinessCode = refCodeAndBusinessCode;
    },
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/jpg" ||
        file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只支持JPG/JPEG/png格式");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //列表
    DetailByPage() {
      this.$http({
        url: `/cmsadmin/homeService/config/index/V2/fetchMaterialByPositionId`,
        method: "get",
        params: {
          "bannerConfigListRequest.page": this.pageIndex,
          "bannerConfigListRequest.size": this.pageSize,
          "cmsGoodsInfoConfigListRequest.page": this.pageIndex,
          "cmsGoodsInfoConfigListRequest.size": this.pageSize,
          bannerFlag: "1",
          positionType: "95",
          positionId: this.$route.query.positionId
        }
      }).then(res => {
        console.log(res.data.bannerConfigListResponse.list, "11111");
        const a = res.data.bannerConfigListResponse.list;
        this.tableData = a;
        this.total = a.length;
      });
    },
    //编辑新增
    isDialog(type, data) {
      this.treeData = this.originTreeData;
      this.msg = type;
      this.lister = data;
      if (type == "新增") {
        this.refCodeAndBusinessCode = [];
        (this.defaultCheckedKeys = []),
          (this.form = {}),
          (this.dialogFormVisible = true);
      } else {
        this.$http({
          url: `/cmsadmin/homeService/config/index/V2/fetchMaterialByPositionId`,
          method: "get",
          params: {
            "bannerConfigListRequest.page": this.pageIndex,
            "bannerConfigListRequest.size": this.pageSize,
            "cmsGoodsInfoConfigListRequest.page": this.pageIndex,
            "cmsGoodsInfoConfigListRequest.size": this.pageSize,
            bannerFlag: "2",
            positionType: "95",
            positionId: this.$route.query.positionId,
            "fetchBannerRequest.id": data.id,
            "fetchBannerRequest.cid": data.cid
          }
        }).then(res => {
          // console.log(res.data, '编辑')
          this.form = res.data.cmsBannerMaterialRefResponse;
          console.log(this.form, "编辑");
          // 默认选中的商圈
          var _this = this;
          _this.$nextTick(() => {
            _this.defaultCheckedKeys = [];
            _this.defaultCheckedKeys.push(
              res.data.cmsBannerMaterialRefResponse.businessCode
            );
            _this.refCodeAndBusinessCode = [];
            _this.refCodeAndBusinessCode.push({
              businessCode: res.data.cmsBannerMaterialRefResponse.businessCode,
              refCode: res.data.cmsBannerMaterialRefResponse.refCode
            });
            let disabledTreeData = JSON.parse(JSON.stringify(this.treeData));
            // let outerIndex = ''
            // let innerIndex = ''
            disabledTreeData.forEach((item1, index1) => {
              item1.areas.forEach((item2, index2) => {
                if (
                  item2.areaCode ===
                  res.data.cmsBannerMaterialRefResponse.businessCode
                ) {
                  // outerIndex = index1
                  // innerIndex = index2
                  item2.disabled = true;
                }
              });
            });
            this.treeData = disabledTreeData;
            this.dialogFormVisible = true;
          });
        });
      }
    },
    //编辑新增
    isSubmit() {
      console.log(this.lister);
      // 校验 适用城市和商圈为必填参数
      let flag = false;
      if (this.refCodeAndBusinessCode.length > 0 || this.AllData.length > 0) {
        flag = true;
      }
      if (!flag) {
        this.$message.error("请至少选择一个适用城市和商圈");
        return false;
      }
      if (this.msg == "新增") {
        if (this.materialContent !== "") {
          this.$http({
            url: `/cmsadmin/homeService/config/index/V2/addOrUpdateMaterial`,
            method: "post",
            data: {
              cmsMaterialBannerConfigRequest: {
                endTime: moment(this.form.endTime).format("YYYY-MM-DD"),
                materialContent: this.materialContent,
                materialName: this.form.materialName,
                platformTypeCode: this.form.platformType,
                refCodeAndBusinessCode:
                  this.refCodeAndBusinessCode.length > 0
                    ? this.refCodeAndBusinessCode
                    : this.AllData.length > 0
                    ? this.AllData
                    : [],
                startTime: moment(this.form.startTime).format("YYYY-MM-DD"),
                targetUrl: this.form.targetUrl,
                positionId: this.$route.query.positionId
              },
              positionType: "95"
            }
          })
            .then(res => {
              console.log(res, "1231231");
              if (res.success == 1) {
                this.$message.success("添加成功");
                this.DetailByPage();
              }
              this.dialogFormVisible = false;
            })
            .catch(() => {
              this.$message.error("添加失败");
            });
        } else {
          this.$message.error("图片不能为空");
        }
      } else {
        // 修改的时候 只能选择一个商圈
        let flag1 = false;
        if (this.refCodeAndBusinessCode.length == 1) {
          flag1 = true;
        }
        if (!flag1) {
          this.$message.error("只能选择一个商圈");
          return false;
        }
        this.$http({
          url: `/cmsadmin/homeService/config/index/V2/addOrUpdateMaterial`,
          method: "post",
          data: {
            cmsMaterialBannerConfigRequest: {
              endTime: moment(this.form.endTime).format("YYYY-MM-DD"),
              materialContent: this.form.materialContent,
              id: this.lister.id,
              cid: this.lister.cid,
              // platformType: this.lister.platformType,
              positionId: this.$route.query.positionId,
              materialName: this.form.materialName,
              platformTypeCode: this.form.platformType,
              refCodeAndBusinessCode:
                this.refCodeAndBusinessCode.length > 0
                  ? this.refCodeAndBusinessCode
                  : this.AllData.length > 0
                  ? this.AllData
                  : [],
              startTime: moment(this.form.startTime).format("YYYY-MM-DD"),
              targetUrl: this.form.targetUrl
            },
            positionType: "95"
          }
        })
          .then(res => {
            console.log(res, "11111");
            if (res.success == 1) {
              this.$message.success("修改成功");
              this.DetailByPage();
            }
            (this.form = {
              goodsInfoCode: "",
              platformTypeCode: ""
            }),
              ((this.num = ""), (this.dialogFormVisible = false));
          })
          .catch(() => {
            this.$message.error("修改失败");
          });
      }
    },
    // 更换城市数据
    changeRefCode(val) {
      this.businessCode = "";
      this.refCode = val || "";
      this.pageIndex = 1;
      this.bagcode = val;
      const cityData = this.cityList.find(item => {
        this.isNum = val;
        if (item.cityCode == this.isNum) {
          return item.cityCode == val; //筛选出匹配数据
        }
      });
      this.businessList = cityData.areas;
    },
    //查询
    demand() {
      this.$http({
        url: `/cmsadmin/homeService/config/index/V2/fetchMaterialByPositionId`,
        method: "get",
        params: {
          "bannerConfigListRequest.page": this.pageIndex,
          "bannerConfigListRequest.size": this.pageSize,
          "cmsGoodsInfoConfigListRequest.page": this.pageIndex,
          "cmsGoodsInfoConfigListRequest.size": this.pageSize,
          "bannerConfigListRequest.refCode": this.refCode,
          "bannerConfigListRequest.businessCode": this.businessCode,
          "bannerConfigListRequest.platformTypeCode": this.platformType,
          "bannerConfigListRequest.bannerStatusCode": this.bannerStatusCode,
          bannerFlag: "1",
          positionType: "95",
          positionId: this.$route.query.positionId
        }
      }).then(res => {
        console.log(res.data, "更换城市数据");
        const a = res.data.bannerConfigListResponse.list;
        this.tableData = a;
        this.total = a.length;
      });
    },
    //清空
    empty() {
      this.refCode = "";
      this.bannerStatusCode = "";
      this.businessCode = "";
      this.platformType = "";
      this.DetailByPage();
    },
    //城市商圈列表树形图
    getCityAreaTreeList() {
      this.$http({
        url: `/hsssystemadmin/v1/businessManagement/getCityAreaTreeList`,
        method: "GET"
      }).then(res => {
        this.treeData = res.data;
        this.originTreeData = res.data;
      });
    },
    //商圈及城市列表
    getBusinessNameCode() {
      this.$http({
        url: `/hsssystemadmin/v1/businessManagement/getCityAreaList`,
        method: "GET"
      }).then(res => {
        this.cityList = res.data;
      });
    },
    //开启/关闭轮播图状态
    switchChange(e, data) {
      //console.log(e, "aing");
      //console.log(data, "data");
      let message = "";
      if (e == 1) {
        message = "开启成功 !";
        this.$http({
          url: `/cmsadmin/homeService/config/index/V2/controlSystemMessage`,
          method: "post",
          data: {
            cid: data.cid,
            id: data.id,
            tempSwitch: 1
          }
        }).then(res => {
          if (res.success == 1) {
            this.$message.success("开启成功");
            this.DetailByPage();
          } else {
            return this.$message.error("开启失败");
          }
        });
      } else if (e == 0) {
        message = "停用成功 !";
        this.$http({
          url: `/cmsadmin/homeService/config/index/controlSystemMessage`,
          method: "POST",
          data: {
            cid: data.cid,
            id: data.id,
            tempSwitch: 0
          }
        }).then(res => {
          if (res.success == 1) {
            this.$message.success("停用成功");
            this.DetailByPage();
          } else {
            return this.$message.error("停用失败");
          }
        });
      }
    },
    handleCheckAllChange(val) {
      if (this.checkAll) {
        this.$refs.treeData.setCheckedNodes(this.treeData);
        const result = [];
        this.$refs.treeData.data.forEach(item => {
          const { id, areas = [] } = item;
          areas.forEach(itm => {
            result.push({
              businessCode: itm.id,
              refCode: id
            });
          });
        });
        this.AllData = result;
        //console.log("result,,,,,,,", result);
      } else {
        this.$refs.treeData.setCheckedKeys([]);
        this.AllData = [];
      }
    },
    //url链接
    urlback() {
      window.location.href = `https://golte-platform.oss-cn-shanghai.aliyuncs.com/excelFile/20211124%20TargetUrl%E9%85%8D%E7%BD%AE%E8%A7%84%E5%88%99.xlsx`;
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.DetailByPage();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.DetailByPage();
    }
  }
};
</script>
<style scoped lang="scss">
.block {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 10px 0 10px;
}
.left {
  font-size: 15px;
}
/deep/ .el-upload {
  border: 1px dashed #999999;
}
.herdertop {
  height: 8vh;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}
.topImg {
  margin-right: 20px;
}
.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 128px;
  text-align: center;
}
.avatar {
  width: 108px;
  height: 108px;
  display: block;
}
.hander {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  font-weight: 900;
}
.news {
  margin-left: 10px;
}
.entirety {
  // width: 95%;
  margin: 10px;
  border: 7px solid #ebeef1;
  border-radius: 10px;
  .basic {
    font-size: 18px;
    font-weight: 900;
    margin-top: 2%;
    margin-bottom: 1%;
    margin-left: 1%;
  }
}
.search {
  display: flex;
  margin-bottom: 0px;
  padding: 10px;
}
.change {
  width: 196px;
  height: 30px;
  border: 1px solid #dfdfdf;
  border-radius: 5px;
  font-size: 12px;
  text-align: center;
  line-height: 30px;
}
.overall {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  margin-top: 3%;
  .left {
    width: 20%;
    height: auto;
  }
  .right {
    width: 80%;
    height: auto;
  }
}
/deep/ .demo-input-suffix {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 300px;
}
/deep/ .el-select {
  width: 180px;
}
.select {
  width: 65%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .dialog-footer,
  .choice {
    margin-left: 2%;
  }
}

.userSearch {
  display: flex;
  /deep/ .el-input__inner {
    box-sizing: border-box;
    height: 40px;
    border-radius: 0;
    width: 132px;
    border: 1px solid #dcdfe6;
  }
  /deep/ .el-icon-arrow-up:before {
    position: relative;
    top: -4px;
  }
  /deep/ .el-button {
    height: 40px;
    border-radius: 0;
    background-color: #fff;
    border: 1px solid #dcdfe6;
    border-left: none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    position: relative;
    .el-icon-search {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  /deep/ .el-input--suffix .el-input__inner {
    border-right: none;
  }
  /deep/ .el-input--suffix .el-input__inner {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
}
.selects {
  width: 55%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .dialog-footer,
  .choice {
    margin-left: 2%;
  }
}

/deep/ .but {
  background: #fd7097;
  color: #fff;
  margin-bottom: 1%;
}
</style>

<style lang="scss" scoped>
/deep/ .cityAndBusiness {
  .el-form-item__label {
    width: 120px !important;
  }
  .el-form-item__label::before {
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
  }
}
</style>
